<template>
  <div class="main">
    <div class="header">
      <div class="img">
        <span>长三角金融联盟链</span>
      </div>

      <div class="menu-box">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex: 1"
        >
          <el-menu-item
            v-for="(item, i) in activeNavList"
            :key="i"
            :index="item.name"
          >
            <template slot="title">
              <span> {{ item.navItem }}</span>
            </template>
          </el-menu-item>
        </el-menu>
        <!--向右对齐-->
        <ul class="nav navbar-nav navbar-right right_part" v-if="!refreshLock">
          <li class="nav_r_item_start">&nbsp;</li>

          <li class="nav_r_item">
            <a href="#" id="userInfo" @click="longins"
              ><span class="glyphicon glyphicon-user"></span> 登录</a
            >
          </li>
          <li
            style="
              width: 2px;
              height: 25px;
              background: #8490a7;
              opacity: 0.5;
              margin-top: 20px;
            "
          ></li>
          <li class="nav_r_item" style="margin-right: 20px;">
            <a href="#" id="userInfo" @click="zhuce">注册</a>
          </li>

          <li @click="logout">
            <img
              src="../../assets/exittuichu.png"
              style="margin-top: 20px; margin-left: -10px; cursor: pointer"
            />
          </li>
          <li class="nav_r_item_end">&nbsp;</li>
        </ul>
        <ul class="nav navbar-nav navbar-right right_part" v-if="refreshLock">
          <li class="nav_r_item_start">&nbsp;</li>

          <li>
            <img src="../../assets/yonghu.png" style="margin-top: -8px" />
            <span
              style="
                width: 63px;
                height: 15px;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #051232;
                line-height: 60px;
              "
            >
              {{username}}
            </span>
          </li>
          <li
            style="
              width: 2px;
              height: 25px;
              background: #8490a7;
              opacity: 0.5;
              margin-top: 16px;
              margin-left: 10px;
            "
          ></li>

          <li @click="logout">
            <img
              src="../../assets/exittuichu.png"
              style="margin-top: 18px; margin-left: 10px; cursor: pointer"
            />
          </li>
          <li class="nav_r_item_end">&nbsp;</li>
        </ul>
      </div>
    </div>
    <!--内容区-->

    <section class="content-container">
      <div class="grid-content">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </section>
    <!-- 底部 -->
    <div class="dibu">
      <div class="wenzi">
        <span>常见问题</span>
        <span style="margin-left: 20px">相关下载</span>
        <span style="margin-left: 20px"
          ><img class="mg" src="@/assets/potho.png" /> 025-5462-4833</span
        >
      </div>
      <div class="hm">
        <span>备案号 IVSHdsadshfksdfjds 苏州开博通联科技有限公司 版权所有</span>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store"; // progress bar style
export default {
  data() {
    return {
      username:"",
      userInfos: "",
      activeIndex: "HomePage",
      //activeIndex2: "CustomerHomePage",
      activeIndex2: "orderzx",
      activeIndex3: "MageHomePage",
      refreshLock: false,
      navList1: [
        { name: "HomePage", navItem: "首页" },
        { name: "NewsAlert", navItem: "交易大厅" },
        { name: "PopGanda", navItem: "订单中心" },
        // { name: "Empower", navItem: "我的授信" },
        { name: "Server", navItem: "我的授权" },
        { name: "User", navItem: "用户中心" },
        { name: "News", navItem: "消息中心" },
      ],
      navList2: [
        // { name: "CustomerHomePage", navItem: "首页" },
        { name: "orderzx", navItem: "询价中心" },
        { name: "PriceBase", navItem: "报价设置" },
        // { name: "enterpriseAuthorize", navItem: "额度授信" },
        { name: "customerzx", navItem: "客户中心" },
        { name: "accountzx", navItem: "账户中心" },
        { name: "yinhNews", navItem: "消息中心" },
      ],
      navList3: [
        { name: "MageHomePage", navItem: "首页" },
        { name: "UserManager", navItem: "用户管理" },
        { name: "entrustMana", navItem: "委托管理" },
        { name: "rizhi", navItem: "日志审计" },
        { name: "accountzxMaga", navItem: "账户中心" },
        { name: "magaNews", navItem: "消息中心" },
      ],
    };
  },
  computed: {
    clientType() {
      return this.$store.state.permission.clicentType;
    },
    activeNavList() {
      return this["navList" + this.clientType];
    },
  },
  // computed: mapGetters(["expires_in"]),
  methods: {
    handleSelect(key, keyPath) {},

    longins() {
      this.$router.push({ path: "/login" });
    },
    zhuce() {
      this.$router.push({ path: "/register" });
    },
    logout() {
      // this.$confirm("是否退出系统, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
      localStorage.setItem("clientType", "");
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ path: "/" });
      });
      //  });
    },
  },
  created() {
    this.userInfos = store.getters.userInfo;
    this.username = store.getters.username;
    console.log(store, "token111111");
    this.activeIndex = this.$route.name;
    this.refreshLock = store.getters.access_token;
  },
};
</script>

<style>
</style>
<style scoped>
.header {
  width: 100%;
  background-color: #ffffff;
}

.img span {
  display: table-cell;
  vertical-align: middle;
  padding: 0px;
  height: 16px;
  font-size: 22px;
  font-weight: bold;
  color: #051232;
  line-height: 60px;
  padding-left: 10%;
  float: left;
}
a {
  color: #0075ff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
}
.dibu {
  width: 100%;
  background: #262f3e;
  position: fixed;
  bottom: 0;
  height: 41px;
}
.wenzi {
  float: left;
  margin-left: 20px;
  margin-top: -5px;
}
.dibu span {
  width: 182px;
  height: 8px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 53px;
}
.hm {
  float: right;
  margin-right: 29px;
  opacity: 0.2;
  margin-top: -5px;
}
.mg {
  width: 20px;
  height: 22px;
}
.menu-box {
  margin-left: 22%;
  position: relative;
  /* display: flex;
  justify-content: space-between; */
}

.content-container {
  margin-top: 10px;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}

/deep/ .el-menu-demo .el-menu-item {
  font-size: 16px !important;
}

/deep/ .el-menu-demo > .el-menu-item.is-active {
  color: #0075ff !important;
  font-size: 16px !important;
}

/deep/ .el-menu-demo > .el-menu-item.is-active {
  border-bottom: 2px solid #0075ff !important;
}
.navbar-nav {
  position: absolute;
  top: 0;
  right: 0;
}
.navbar .right_part {
  margin: 0;
  border: solid 0px;
}
.navbar-right {
  margin-right: 2% !important;
}
.navbar .right_part .nav_r_item_start,
.nav_r_item_end {
  width: 40px;
  height: 50px;
  border: solid 0px;
}

.navbar .right_part .nav_r_item {
  height: 50px;
  margin-left: 0px;
  border: solid 0px;
}

.nav_r_item .drop-down-list-tip .list-group a.list-item {
  font-size: 14px;
  font-weight: normal;
}

.nav_r_item .drop-down-list-tip .list-group a.list-item:hover {
  font-size: 14px;
  font-weight: normal;
}
/* right part > a */

.navbar .right_part .nav_r_item a {
  padding: 0;
  margin: 17px 10px 0px 10px;
  line-height: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: solid 0px;
}

.navbar .right_part .nav_r_item a:hover {
  color: #fff;
  font-weight: bold;
}

.navbar .right_part .nav_r_item a:visited {
  color: #fff;
}
</style>

